<template>
	<view>
		<view class="container" v-for="(item,index) in datalist" :key="index">
			<image :src="item.avatar" class="avatar" mode="aspectFit"></image>
			<span class="sign">{{ item.name }}/{{ item.sign }}</span>
			<button class="success">同意</button>
			<button class="fail">拒绝</button>
		</view>
	</view>
</template>

<script>
	export default {
		onLoad() {
		   // 设置页面标题  
		   uni.setNavigationBarTitle({  
		     title: '好友申请列表'  
		   });
		   this.user_Name = uni.getStorageSync('user_Name') // 获得本机的用户名
		   // uni.request({
		   //   url: '', // 地址附带用户名 查询第三方表中两个id是否是好友位flase，然后应该还有一个get方法，获取别人的个人信息
		   //   method: 'GET', 
		   //   success: (res) => {
		   //     if (res.data.success) {
		   //       uni.showToast({
		   //         title: '添加好友列表已获取',
		   //         icon: 'success',
		   //       });
		   //       this.datalist = res.data.data
		   //     } else { 
		   //       uni.showModal({
		   //         title: '提示',
		   //         content: '添加好友列表获取时遇到问题，请稍后重试！',
		   //       });
		   //     }
		   //   },
		   //   fail: () => {
		   //     uni.showModal({
		   //       title: '网络错误',
		   //       content: '无法连接服务器，请检查网络连接！',
		   //     });
		   //   },
		   // });
		 },
		data() {
			return {
				datalist:[
					{
						name: "张三",
						sign: "21222112",
						avatar: 'https://p.qqan.com/up/2021-4/16182800486083341.png'
					},
					{
						name: "李四",
						sign: "21222112556",
						avatar: 'https://p.qqan.com/up/2021-4/16182800486083341.png'
					},
				]
			}
		},
		methods: {
			
		}
	}
</script>

<style scoped>
.container {  
	display: flex;  
	align-items: center;  
	justify-content: space-between;
	margin-top: 20rpx;  
	padding: 0 20rpx;  
}  
  
.avatar {  
	width: 90rpx;  
	height: 90rpx;  
	border-radius: 50%;  
}  
  
.info {  
	display: flex;  
	flex-direction: column;  
	align-items: flex-start; 
	margin-left: 30rpx; 
}  
  
.name {  
	font-size: 30rpx; 
	font-weight: bold; 
}  
  
.sign {  
	font-size: 12px;  
	color: #999;   
	margin-top: 10rpx;
	margin-left: 20rpx;  
}  
  
.success, .fail {  
	flex: 1; 
	margin-left: 20rpx;   
	background-color: lightgreen; 
	border-radius: 5rpx; 
	font-size: 10px;
	width: 50px;
	height: 25px; 
	color: #fff; 
	text-align: center;  
}  
  
.fail {  
	background-color: red; 
}  
</style>